<template>
  <div class="todo-container">
    <h2 style="text-align: center">Todolist vue3 + TS</h2>
    <div class="todo-wrap">
      <todo-header @addTodo="addTodo"></todo-header>
      <todo-list :todos="todos" @delTodo="delTodo" @change="change"></todo-list>
      <todo-footer :todos="todos" @changeAll="changeAll"></todo-footer>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import TodoList from '@/components/TodoList.vue'
import TodoHeader from '@/components/Header.vue'
import TodoFooter from '@/components/Footer.vue'

import type { Todo } from '../src/types/todo.ts'

const data = JSON.parse(localStorage.getItem('todos') || '[]')
const todos = ref<Todo[]>(data)

watch(
  todos,
  (todos) => {
    // 副作用
    localStorage.setItem('todos', JSON.stringify(todos))
  },
  {
    deep: true,
  }
)

const addTodo = (title: string): void => {
  const todo: Todo = { id: Date.now(), title: title, isDone: false }
  todos.value.push(todo)
}

const delTodo = (id: number): void => {
  todos.value = todos.value.filter((todo) => todo.id !== id)
}

const change = (id: number, isDone: boolean): void => {
  const findTodo = todos.value.find((todo) => todo.id === id) as Todo
  findTodo.isDone = isDone
}

const changeAll = (isDone: boolean): void => {
  todos.value.forEach((todo) => {
    todo.isDone = isDone
  })
}
</script>

<style>
/*base*/
body {
  background: #fff;
}

.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}

.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}

.btn:focus {
  outline: none;
}

.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>
